/**
 * 下拉选择组件
 * @author SPY
 * @date 2020/03/31
 */
import React from 'react';
import { Select } from 'antd';

const { Option } = Select;

export interface SimpleSelectProps {
  idKey?: string; // 下拉框节点对应的id名称
  nameKey?: string; // 下拉框节点对应的name名称
  placeholder?: string; // 下拉框的提示信息
  disabledOptions?: string[]; // 要禁用的id集合
  dataSource: Array<ItemProps>; // 下拉框要展示的数组列表
  [x: string]: any; // 兼容antd组件默认参数传入
}

export interface ItemProps {
  [key: string]: any; // 定义对象的下标为string类型
}

const SimpleSelect: React.FC<SimpleSelectProps> = props => {
  const {
    idKey = 'id',
    nameKey = 'name',
    placeholder = '请选择',
    disabledOptions = [],
    dataSource,
    ...restProps
  } = props;
  return (
    <Select placeholder={placeholder} {...restProps}>
      {Array.isArray(dataSource) &&
        dataSource.map(item => {
          return (
            <Option
              key={item[idKey]}
              value={item[idKey]}
              disabled={disabledOptions.includes(item[idKey])}
            >
              {item[nameKey]}
            </Option>
          );
        })}
    </Select>
  );
};

export default SimpleSelect;
